<template>
  <div class="app-container">
    <el-card>
      <div class="filter-container">
        <el-input
          v-model="pdfUrl"
          placeholder="请输入PDF文档URL"
          style="width: 300px; margin-right: 10px;"
        />
        <el-button size="small" type="primary" @click="loadPDF">加载PDF</el-button>
      </div>

      <div class="pdf-container">
        <PDFPreview :url="currentPdfUrl" />
      </div>
    </el-card>
  </div>
</template>

<script>
import PDFPreview from '@/components/PDFPreview'

export default {
  name: "Spec",
  components: {
    PDFPreview
  },
  data() {
    return {
      pdfUrl: 'http://110.40.176.62/static/templatepdf.pdf',
      currentPdfUrl: '',
      specContent: {
        // 示例规格内容
        '颜色': ['红色', '蓝色', '绿色'],
        '尺寸': ['S', 'M', 'L', 'XL'],
        '材质': '纯棉',
        '产地': '中国',
        '适用季节': '四季通用'
      }
    }
  },
  mounted() {
    // 自动加载PDF
    this.loadPDF()
  },
  methods: {
    searchAction() {

    },
    resetForm() {

    },
    //加载分页
    async pageAction() {


    },

    //取消新增/编辑弹窗页面
    handleClose(done) {

    },

    cancelAction() {

    },
    showDialogAction(row) {

    },
    addAction() {

    },


    delAction(row) {

    },
    // 新增规格项
    addSpecItemAction() {

    },
    delSpecItemAction(row, index) {

    },
    loadPDF() {
      this.currentPdfUrl = this.pdfUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-container {
  margin-top: 20px;
  height: calc(100vh - 200px);
}

.drawer-footer {
  text-align: right;
  padding: 10px 10% 0 20px;
  box-sizing: border-box
}

.preview-section {
  margin-top: 20px;
}
</style>
